<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : null,
		        PlotBorderWidth:0,
				type: 'gauge'
		    },
		    title: {
		        text: 'Speedometer'
		    },
		    pane: {
		        startAngle: -150,
		        endAngle: 150,
		        background: [{
		            backgroundColor: {
		                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
		                stops: [
		                    [0, '#FFF'],
		                    [1, '#333']
		                ]
		            },
		            borderWidth: 0,
		            outerRadius: '109%'
		        }, {
		            backgroundColor: {
		                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
		                stops: [
		                    [0, '#333'],
		                    [1, '#FFF']
		                ]
		            },
		            borderWidth: 1,
		            outerRadius: '107%'
		        }, {
		            // default background
		        }, {
		            backgroundColor: '#DDD',
		            borderWidth: 0,
		            outerRadius: '105%',
		            innerRadius: '103%'
		        }]
		    },
		    yAxis: {
		        min: 0,
		        max: 200,
		        
		        minorTickInterval: 'auto',
		        minorTickWidth: 1,
		        minorTickLength: 10,
		        minorTickPosition: 'inside',
		        minorTickColor: '#666',
		
		        tickPixelInterval: 30,
		        tickWidth: 2,
		        tickPosition: 'inside',
		        tickLength: 10,
		        tickColor: '#666',
		        labels: {
		            step: 2,
		            rotation: 'auto'
		        },
		        title: {
		            text: 'km/h'
		        },
		        plotBands: [{
		            from: 0,
		            to: 120,
		            color: '#55BF3B' // green
		        }, {
		            from: 120,
		            to: 160,
		            color: '#DDDF0D' // yellow
		        }, {
		            from: 160,
		            to: 200,
		            color: '#DF5353' // red
		        }]        
		    },
		
		    series: [{
		        name: 'Speed',
		        data: [80],
		        tooltip: {
		            valueSuffix: ' km/h'
		        }
		    }]
		};
		
		myChart.SetOptions(cfg);

		myChart.Draw();
	});
	
	function myChart_OnLoad() {
		var series = myChart.GetSeries(0);
		
		var point = series.GetData()[0];
		console.log(point.y);
		
		var newVal = point.y + 11;
		
		series.SetData([{Y: newVal}]);
		
// 		setInterval(function () {
// 			var point = myChart.getSeries.points;
// 			console.log(point);
// 		}, 3000);
		
	}
</script>
<title>Gauge 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">Gauge 예제</div>
	<div id="desc">
		계기판과 같은 형태의 Gauge 디자인 형태로 차트를 그린다.
	</div>

	<div id="functionArea">
		chart: [{<br>
        &nbsp;&nbsp;&nbsp;&nbsp;type: '<font color="#FF0000">gauge</font>',<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        }];<br>
        <br>
        pane: {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;(게이지 차트의 여러가지 표현을 설정한다.)<br>
        }<br>
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "400px");
		</script>
	</div>
</div>
</body>
</html>